<template>
  <div class="tw-h-screen tw-flex tw-justify-center tw-items-center tw-bg-gray-50">
    <div class="login-wrapper tw-bg-white">
      <div class="login">
        <div class="login-header">
          <img
            class="tw-h-20 tw-mb-3"
            src="https://shop.fed.lagou.com/uploads/attach/2021/06/20210610/267b2230668ba8c888aef3bad5d77607.png"
            alt=""
          >
        </div>
        <n-form
          :model="user"
          ref="formRef"
          :rules="rules"
          :show-label="false"
        >
          <n-form-item
            path="account"
          >
            <n-input
              v-model:value="user.account"
              placeholder="请输入用户名"
              @keydown.enter.prevent
            >
              <template #prefix>
                <n-icon>
                  <flash-icon />
                </n-icon>
              </template>
            </n-input>
          </n-form-item>
          <n-form-item
            path="pwd"
          >
            <n-input
              v-model:value="user.pwd"
              placeholder="请输入密码"
              type="password"
              @keydown.enter.prevent
            >
              <template #prefix>
                <n-icon>
                  <flash-icon />
                </n-icon>
              </template>
            </n-input>
          </n-form-item>
          <n-form-item path="imgcode">
            <div class="tw-flex tw-items-centers">
              <n-input
                v-model:value="user.imgcode"
                placeholder="请输入验证码"
              >
                <template #prefix>
                  <n-icon>
                    <flash-icon />
                  </n-icon>
                </template>
              </n-input>
              <img
                class="tw-ml-2 tw-h-8"
                alt="验证码"
                :src="captchaSrc"
                @click="loadCaptcha"
              >
            </div>
          </n-form-item>
          <n-form-item>
            <n-button
              type="primary"
              block
              @click.prevent="handleSubmit"
            >
              登录
            </n-button>
          </n-form-item>
        </n-form>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { FormInst, FormRules, useMessage } from 'naive-ui'
import { FlashOutline as FlashIcon } from '@vicons/ionicons5'
import { login, getCaptcha } from '@/api/common'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from '@/store'
const router = useRouter()
const route = useRoute()
const message = useMessage()
const store = useStore()
// 状态
const formRef = ref<FormInst | null>(null)
const user = reactive({
  account: 'lagou',
  pwd: '123456',
  imgcode: ''
})
const rules = ref<FormRules>({
  account: [
    {
      required: true,
      message: '请输入用户名',
      trigger: ['blur']
    }
  ],
  pwd: [
    {
      required: true,
      message: '请输入密码',
      trigger: ['blur']
    }
  ],
  imgcode: [
    {
      required: true,
      message: '请输入验证码',
      trigger: ['blur']
    }
  ]
})
const loading = ref(false)
const captchaSrc = ref()

// 生命周期
onMounted(() => {
  loadCaptcha()
})

// 方法
const loadCaptcha = async () => {
  const data = await getCaptcha()
  captchaSrc.value = URL.createObjectURL(data)
}
const handleSubmit = async () => {
  const valid = await formRef.value?.validate()
  if (valid) return false
  loading.value = true
  const data = await login(user).finally(() => {
    loading.value = false
  })
  if (!data) return
  message.success('登录成功')

  // 存储登录用户信息
  store.commit('setUser', {
    ...data.user_info,
    token: data.token
  })
  store.commit('setMenus', data.menus)

  // 跳转回原来页面
  let redirect = route.query.redirect
  if (typeof redirect !== 'string') {
    redirect = '/'
  }
  router.replace(redirect)
}

</script>
<style lang="scss" scoped>
  .login-wrapper {
    width: 400px;
    border-radius: 6px;
  }
  .login {
    width: 100%;
    padding: 0 40px 32px 40px;
  }
</style>
